<template>
  <view style="width: 100%">
    <view class="home">
      <view class="contentHome">
        <view
          class="homeTop"
          :style="{paddingTop: navBarHeight+5 +'px',height:menuHeight+navBarHeight+'px',lineHeight:menuHeight+'px'}"
        >
          <u-icon class="homeTopTest" @click="back" name="arrow-left" color="#fff" size="36"></u-icon>
          <text>选择分享职位</text>
        </view>
        <view class="padd16 padd55">
          <u-search
            placeholder="请输入职位名称"
            animation="false"
            :show-action="false"
            v-model="positionName"
          ></u-search>
        </view>
        <view class="padd16 pR">
          <view class="contentHoCon">
            <view class="loadingShow">
              <u-loading :show="loadMore" size="48"></u-loading>
            </view>
            <view
              class="contentHoConBack"
              v-for="i in recruitInfoslistAll"
              :key="i"
              @click="openShare(i)"
            >
              <view>
                <img class="wei" :src="i.checked ? you : wei" alt />
              </view>
              <view style="width: 90%;">
                <view class="contentHoConBackTop">
                  <view class="contentHoConBackTop1">
                    <view class="whitNoWrap contentHoConBackTop1Wwidth">{{ i.postName }}</view>
                    <text class="contentHoConBackTop2" v-if="i.isEmergency">急招</text>
                    <text class="contentHoConBackTop22" v-if="i.workType && i.workType === 1">全职</text>
                    <text class="contentHoConBackTop33" v-if="i.workType && i.workType === 2">兼职</text>
                  </view>
                  <view class="contentHoConBackTop3">
                    {{ i.lowestSalary }}-{{
                    i.highestSalary
                    }}元
                    <text
                      v-if="i.salaryGrantType"
                    >/{{ i.salaryGrantType === 1 ? "日" : i.salaryGrantType === 2 ? "月" : "年" }}</text>
                  </view>
                </view>
                <view class="paddtop10 contentHoConBackTime">
                  <text>{{i.workingSeniority | workingSeniorityFun}}</text>
                  <text class="magRight8">|</text>
                  <text class="magRight8">{{i.lowestEducation | lowestEducationFun}}</text>
                </view>
                <view class="contentHoConBackName paddtop10">
                  <text>{{ i.companyUnitName }}</text>
                  <text
                    class="paddLeft fontColorAC"
                    :key="z"
                    v-for="z in i.cityName.split(',').splice(1)"
                  >{{ z }}</text>
                </view>
              </view>
            </view>
            <view style="height:70px"></view>
          </view>
        </view>
      </view>
      <u-popup v-model="showShare" mode="bottom" border-radius="14">
        <view class="padd5" @click="WechatSharePictures">
          <view class="indexWorkPoptext">
            <img class="indexWorkPopimg" src="../static/pyq.png" alt />
            生成朋友圈分享图
          </view>
          <view>
            <u-icon name="arrow-right" color="#ACAFC5" size="32"></u-icon>
          </view>
        </view>
        <u-gap height="8" bg-color="#F3F5FB"></u-gap>
        <view class="popupPop" @click="showShare = false">取消</view>
      </u-popup>
      <view class="shareBottom">
        <view class="shareBottomBox">
          <view>
            <text @click="shareAll">全选</text>
            <img @click="shareAll" class="wei" :src="shareAllShow ? you : wei" alt />
            <text class="yxzw">已选职位</text>
            <text class="yxzwNum">{{ recruitInfoslistAlllen }}</text>
          </view>
          <view>
            <button class="shareBottomButton" @click="openShowShare">分享</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { recruitInfos, getQRCodeByrecruitInfoIds } from "./api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      qrCodeUrl: "",
      navBarHeight: 0,
      menuHeight: 0,
      pageUrl: "",
      showShare: false,
      recruitInfoslistAlllen: 0,
      pageCount: 1,
      pageNo: 1,
      recruitInfoslistAll: [],
      wei: require("../static/wei.png"),
      you: require("../static/you.png"),
      positionName: "",
      shareAllShow: false,
      list: [
        {
          name: "apple",
          checked: false
        },
        {
          name: "banner",
          checked: false
        }
      ]
    };
  },
  computed: {
    ...mapState(["user", "jobSeeker"]),
    ...mapState(["site"])
  },
  filters: {
    workingSeniorityFun(val) {
      if (val === 1) {
        return "不限";
      } else if (val === 2) {
        return "应届生";
      } else if (val === 3) {
        return "1-3年";
      } else if (val === 4) {
        return "3-5年";
      } else if (val === 5) {
        return "5-10年";
      } else if (val === 6) {
        return "10年以上";
      } else {
        return "";
      }
    },
    lowestEducationFun(val) {
      if (val === 1) {
        return "初中";
      } else if (val === 2) {
        return "中专";
      } else if (val === 3) {
        return "大专";
      } else if (val === 4) {
        return "高中";
      } else if (val === 5) {
        return "本科";
      } else if (val === 6) {
        return "硕士";
      } else if (val === 7) {
        return "博士";
      } else if (val === 8) {
        return "其他";
      } else {
        return "";
      }
    }
  },
  watch: {
    positionName() {
      this.pageNo = 1;
      this.recruitInfoslistAlllen = 0;
      this.recruitInfoslistAll = [];
      this.getListAllByIsCancel();
    }
  },
  onLoad() {
    const systemInfo = wx.getSystemInfoSync();
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    this.menuHeight = menuButtonInfo.height;
    this.navBarHeight = systemInfo.statusBarHeight;
    this.getListAllByIsCancel();
  },
  methods: {
    openOneShare() {
      wx.navigateToMiniProgram({
        appId: "wx8ae3dc2847cded4e",
        path: this.pageUrl,
        extraData: {
          foo: "bar"
        },
        envVersion: "trial",
        success(res) {
          // 打开成功
        }
      });
    },
    openShowShare() {
      const recruitlength = this.recruitInfoslistAll.filter(
        z => z.checked === true
      ).length;
      if (recruitlength === 0) {
        uni.showToast({
          title: "请选择要分享的职位",
          icon: "none",
          duration: 2000
        });
      } else {
        const data = this.recruitInfoslistAll
          .filter(z => z.checked === true)
          .map(z => z.id);
        getQRCodeByrecruitInfoIds({
          siteId: this.$store.state.user.siteId,
          sourceId: uni.getStorageSync("empId"),
          sourceType: "emp",
          recruitIds: data
        })
          .then(res => {
            this.qrCodeUrl = res.qrCodeUrl;
            this.pageUrl = res.pageUrl;
            this.showShare = true;
            console.log(this.qrCodeUrl);
          })
          .catch(err => {
            console.log(err);
          });
      }
      console.log("recruitlength", recruitlength);
    },
    onReachBottom() {
      this.showShare = false;
      // 显示加载图标
      // console.log(this.pageNo, this.pageCount);
      this.pageNo++;
      if (this.pageCount < this.pageNo) {
        // 不加载
      } else {
        this.getListAllByIsCancel();
      }
    },
    getListAllByIsCancel() {
      const data = {
        isCancel: 2,
        isEmp: 1,
        positionName: this.positionName,
        pageSize: 10,
        hadNumber: true,
        pageNo: this.pageNo,
        siteId: this.$store.state.user.siteId,
        empCompanyId: this.site.companyId
      };
      this.loadMore = true;
      recruitInfos(data)
        .then(res => {
          this.loadMore = false;
          this.pageCount = res.pageCount;
          this.shareAllShow = false;
          res.entities.map(i => (i.checked = false));
          this.recruitInfoslistAll = [
            ...this.recruitInfoslistAll,
            ...res.entities
          ];
          console.log(this.recruitInfoslistAll);
        })
        .catch(err => {
          console.log(err);
        });
    },
    back() {
      uni.navigateBack();
    },
    openShare(e) {
      this.recruitInfoslistAll.find(i => {
        if (i.id === e.id) {
          i.checked = !i.checked;
        }
      });
      const recruitInfoShow = this.recruitInfoslistAll.map(z => {
        if (z.checked === true) {
          return true;
        } else {
          return false;
        }
      });
      // console.log('recruitInfoShow',recruitInfoShow)
      // 已选职位 长度
      this.recruitInfoslistAlllen = this.recruitInfoslistAll.filter(
        z => z.checked === true
      ).length;
      if (recruitInfoShow.indexOf(false) === -1) {
        this.shareAll();
      } else {
        this.shareAllShow = false;
      }
    },
    shareAll() {
      this.shareAllShow = !this.shareAllShow;
      if (this.shareAllShow) {
        this.recruitInfoslistAll.map(i => (i.checked = true));
      } else {
        this.recruitInfoslistAll.map(i => (i.checked = false));
      }
      this.recruitInfoslistAlllen = this.recruitInfoslistAll.filter(
        z => z.checked === true
      ).length;
    },
    onShareAppMessage(options) {
      console.log(options);
      var that = this; // 设置菜单中的转发按钮触发转发事件时的转发内容
      var shareObj = {
        title: "分享好友", // 默认是小程序的名称(可以写slogan等)
        path: "/" + this.pageUrl, // 默认是当前页面，必须是以‘/’开头的完整路径
        success: function(res) {
          // 转发成功之后的回调
          // if (res.errMsg === "shareAppMessage:ok") {
          // }
        }
      }; // 来自页面内的按钮的转发
      if (options.from === "button") {
        var eData = options.target.dataset;
        console.log(eData.name); // shareBtn // 此处可以修改 shareObj 中的内容
        shareObj.path = "/" + this.pageUrl;
      } // 返回shareObj
      this.showShare = false;
      return shareObj;
    },
    WechatSharePictures() {
      this.showShare = false;
      console.log(this.qrCodeUrl);
      uni.navigateTo({
        url: `/share/share/openShare/openShare?qrCodeUrl=${this.qrCodeUrl}`
      });
    }
    //
  }
};
</script>

<style lang="scss">
@import "../../../styles/styles.scss";
@import "./index.scss";
</style>
